<template>
  <div :class="show?'body2':'body'">
    <nav-com
      title="我要退货"
      :showView='true'
      @back="backHandler()"
    ></nav-com>
    <div class="content" style="display:none">
      <h3 style="color:#EA5569;text-align: center;">退货流程</h3>
      <div class="title-bg"></div>
      <div class="line"><div class="index">1</div><span class="text">点击“我要退货”按钮</span></div>
      <div class="dian">
        <div>.</div>
        <div>.</div>
        <div>.</div>
      </div>
      <div class="line"><div class="index">2</div><span class="text">在浏览器下载“感谢支持”APP</span></div>
      <div class="dian">
        <div>.</div>
        <div>.</div>
        <div>.</div>
      </div>
      <div class="line"><div class="index">3</div><span class="text">打开“感谢支持”APP，输入原有商城的手机号及密码 </span></div>
      <div class="dian">
        <div>.</div>
        <div>.</div>
        <div>.</div>
      </div>
      <div class="line"><div class="index">4</div><span class="text">在“感谢支持”APP里面，“我的”菜单项点击我要退货</span></div>
      <!-- <div class="dian">
        <div>.</div>
        <div>.</div>
        <div>.</div>
      </div>
      <div class="line"><span class="index">5</span><span class="text">在退货app里面，“我的”栏目有我要退货</span></div> -->
    </div>
    <div v-if="!show"
      class="button"
      @click="toReturn"
    >
      我要退货
    </div>
    <!-- <van-overlay
      v-if="show"
      @click="show = false"
    > -->
    
      <div   v-if="show"
        class="wrapper"
      ><h2 style="color:#FFF;text-align:center;">·截图保存</h2>
        <img src="../../../assets/my/returnGoods.png" alt="" style="margin-left:5vw;width:70vw">
      </div>
      <div class="content"  v-if="show">
        <div class="line"><div class="index">1</div><span class="text">截图保存“感谢支持”app二维码</span></div>
        <div class="dian">
          <div>.</div>
        </div>
        <div class="line"><div class="index">2</div><span class="text">微信扫码“感谢支持”app二维码</span></div>
        <div class="dian">
          <div>.</div>
        </div>
        <div class="line"><div class="index">3</div><span class="text">下载“感谢支持”app，输入原有商城的手机号及密码</span></div>
        <div class="dian">
          <div>.</div>
        </div>
        <div class="line"><div class="index">4</div><span class="text">在“感谢支持”app里面，“我的”栏目有我要退货</span></div>
        <div class="dian">
          <div>.</div>
        </div>
        <div class="line"><div class="index">5</div><span class="text">按照退货流程申请退款</span></div>
      </div>
    <!-- </van-overlay> -->

  </div>
</template>

<script>
import {iwant2return} from "@/api/api";
import navCom from "@/component/nav";
import { Toast } from 'vant';
export default {
  components: {
    navCom,
  },
  data(){
    return{
        show:false
    }
  },
  created(){
  },
  methods: {
    backHandler() {
      if(weixin.isAndroid()){
        window.JS_TROOPS.goBack()
      }else{
        this.$router.go(-1);
      }
    },
    toReturn() {
    //   this.show = true
    
    },
    toReturn(){
        iwant2return().then((result) => {
            if(result.data.data[0] == "success"){
              // window.JS_TROOPS.download('https://thsystemfront.bigchun.com/down/index.html')
              this.show=true
            }else{
              Toast('请稍后重试！')
            }
        }).catch((err) => {
            
        });
    }
  },
};
</script>

<style scoped>
  .body{
    position:relative; background-image: url(../../../assets/my/returnGoodsBg.jpg);background-repeat: round;height: 100vh;
  }
  .body2{

  }
.title-bg {
  height: 10px;
  width: 100px;
  background: rgba(234, 85, 105, 0.1);
  margin: 0 auto;
  border-radius: 5px;
  margin-top: -28px;
  margin-bottom: 50px;
}
.content {
  padding: 10vw;
}
.line {
  display: flex;
  /* align-items: center; */
  /* margin-bottom: 40px; */
}
.dian {
  color: #ea5569;
  line-height: 8px;
  margin: 0 0 5px 6px;
}
.index {
  display: inline-block;
  height: 20px;
  width: 20px;
  background: #ea5569;
  border-radius: 10px;
  color: white;
  text-align: center;
  font-size: 20px;
  line-height: 20px;
}
.text {
  margin-left: 20px;
  width: 73vw;
}
.button {
  height: 40px;
  width: 50vw;
  margin: 0 auto;
  background: #ea5569;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  margin-top: 60vh;
}
.wrapper{
   /* position: absolute; */
    margin: 0 auto;
    width: 80vw;
    height: 90vw;
    background: url('../../../assets/my/returnGoodsBG.png');
    background-size: 100% 100%;
    top:25vh;
    left: 10vw;
    
}
</style>